<template>
  <div class="flexContent">
    <div class="searchBox">
      <!-- 电商门店审核 -->
      <el-form class="demo-form-inline" label-position="left" label-width="auto">
        <div class="serFlexBox">
          <div class="inputBox">
            <el-row :gutter="12" style="display: flex;flex-wrap: wrap;">
              <el-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
                <el-form-item label="门店">
                  <el-select v-model="sForm.id" @click.native="getShopAllList" filterable clearable
                    popper-class="eloption" style="width: 95%">
                    <el-option v-for="shop in shopListTwo" :key="shop.id" :value="shop.id" :label="shop.name" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
                <el-form-item label="状态">
                  <el-select v-model="sForm.auditingStatus" filterable clearable popper-class="eloption"
                    style="width: 95%">
                    <el-option value="0" label="未审核" />
                    <el-option value="1" label="审核通过" />
                    <el-option value="2" label="审核失败" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
                <el-form-item label="省市区域">
                  <el-cascader ref="cascaderAddr" v-model="selectedOptions" clearable style="width: 95%"
                    :options="options" expand-trigger="hover" @change="handleChange" filterable />
                </el-form-item>
              </el-col>
              <el-col :xs="12" :sm="12" :md="12" :lg="10" :xl="6">
                <el-form-item label="申请时间">
                  <el-date-picker clearable v-model="date" style="width: 95%" type="daterange" unlink-panels
                    range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <div class="btnBox">
            <el-button @click.stop="searchFn" class="searchBtn" icon="el-icon-search">搜索</el-button>
            <el-button @click.stop="resetFn" class="resetBtn" icon="el-icon-refresh-right">重置</el-button>
          </div>
        </div>
      </el-form>
    </div>
    <div class="table" id="tableBox" v-height>
      <div style="flex:1;">
        <vxe-table :column-config="{ resizable: true }" border class="tablebox" ref="xTable1"
          :row-config="{ isHover: true }" :scroll-y="{ enabled: true, gt: 21 }" style="width: 100%" height="100%"
          size="medium" align="center">
          <vxe-column type="seq" width="80" title="序号" />
          <vxe-column field="number" title="门店编号" :min-width="elTableAdaptationWidth('number', shopList)"/>
          <vxe-column field="name" title="门店名称" :min-width="elTableAdaptationWidth('name', shopList)"/>
          <vxe-column field="userName" title="门店账号" :min-width="elTableAdaptationWidth('userName', shopList)"/>
          <vxe-column field="region" title="省市区域" :min-width="elTableAdaptationWidth('region', shopList)"/>
          <vxe-column field="auditingStatus" title="状态" min-width="120">
            <template v-slot="{ row }">
              <el-tag v-if="row.auditingStatus === '0'" disabled type="info" plain size="small">未审核</el-tag>
              <el-tag v-if="row.auditingStatus === '1'" disabled type="primary" plain size="small">审核通过</el-tag>
              <el-tag v-if="row.auditingStatus === '2'" disabled type="danger" plain size="small">审核失败</el-tag>
            </template>
          </vxe-column>
          <vxe-column field="createTime" title="申请时间" min-width="150">
            <template v-slot="{ row }">
              <span>{{ row.createTime | parseTime }}</span>
            </template>
          </vxe-column>
          <vxe-column v-if="$showFn(['onlinepaystore_detail', 'onlinepaystore_check'])" fixed="right" width="200"
            title="操作">
            <template v-slot="{ row }">
              <el-button type="text" v-has="'onlinepaystore_detail'" style="margin-right: 10px; color: rgb(0, 132, 255)"
                @click.stop="shopDetail(row)">详情</el-button>
              <el-button style="color: rgb(0, 132, 255)" type="text" v-if="row.auditingStatus === '0'"
                v-has="'onlinepaystore_check'" @click.stop="checkShop(row)">审核</el-button>
            </template>
          </vxe-column>
        </vxe-table>
      </div>
      <div class="paginationBox">
        <el-pagination :current-page="page.pageNum" background :page-sizes="$pageSizes" :page-size="page.pageSize"
          layout="total,-> , sizes, prev, pager, next, jumper" :total="page.total" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </div>

    <el-drawer :title="title" :visible.sync="drawer">
      <el-row :gutter="24" class="txtBox">
        <el-col :span="6">
          <span>门店名称：</span>
        </el-col>
        <el-col :span="16">
          {{ shop.name }}
        </el-col>
      </el-row>
      <el-row :gutter="24" class="txtBox">
        <el-col :span="6">
          <span>省市区域：</span>
        </el-col>
        <el-col :span="16">
          {{ shop.region }}
        </el-col>
      </el-row>
      <el-row :gutter="24" class="txtBox">
        <el-col :span="6">
          <span>详细地址：</span>
        </el-col>
        <el-col :span="16">
          {{ shop.address }}
        </el-col>
      </el-row>
      <el-row :gutter="24" class="txtBox">
        <el-col :span="6">
          <span>营业执照：</span>
        </el-col>
        <el-col :span="16">
          <el-image style="width: 100px; height: 100px" :src="shop.imgUrl" :preview-src-list="[shop.imgUrl]">
          </el-image>
        </el-col>
      </el-row>
      <el-row :gutter="24" class="txtBox" v-if="shop.auditingStatus === '2'">
        <el-col :span="6">
          <span>拒绝原因：</span>
        </el-col>
        <el-col :span="16">
          <div style="border:1px solid #eee;padding: 15px;width: 100%;word-break:break-all;">
            {{ shop.remark }}
          </div>
        </el-col>
      </el-row>
      <div class="btnBOX">
        <el-button type="primary" @click="drawer = false" class="celBtn">返回</el-button>
        <el-button type="primary" class="submitBtn" @click="updateShopStatus('1')"
          v-if="title !== '店铺详情'">审核通过</el-button>
        <el-button type="primary" class="delBtn" v-if="title !== '店铺详情'" @click="dialogVisible = true">审核拒绝</el-button>
      </div>
    </el-drawer>
    <el-dialog title="审核拒绝" :visible.sync="dialogVisible" width="30%">
      <el-input v-clearEmoji type="textarea" :rows="5" placeholder="请输入拒绝原因" maxlength="100" v-model.trim="remark"
        style="width: 100%;"></el-input>
      <span slot="footer">
        <el-button class="celBtn" @click="dialogVisible = false">取 消</el-button>
        <el-button class="addBtn" @click="updateShopStatus('2')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getShopList, updateShopStatus, getShopAllList } from "@/api/shopManagement";
import { regionData, CodeToText } from "element-china-area-data";
export default {
  name: "GoodsInfo",
  data() {
    return {
      drawer: false,
      dialogVisible: false,
      remark: '', // 拒绝原因
      shop: {},
      title: '电商门店审核',
      sForm: {
        id: '',
        auditingStatus: '',
        regionId: '',
        endTime: '',
        openTime: ''
      },
      shopList: [],
      shopListTwo: [],
      date: [],
      linkUrl: "",
      options: regionData,
      selectedOptions: [],
      isSearch: false,
      selectedOptionsForm: {
        province: "",
        county: "",
        area: "",
      },
      addtions: {
        names: "",
      },
      page: {
        pageNum: 1,
        pageSize: 20,
        total: 0,
      },
      name: "",
      region: "",
    };
  },
  created() {
    this.getShopList();
    this.getShopAllList();
  },
  methods: {
    async getShopList() {
      if (!this.isSearch) {
        this.sForm = {
          id: '',
          auditingStatus: '',
          regionId: '',
          endTime: '',
          openTime: ''
        }
      }
      const res = await getShopList({
        ...this.page,
        ...this.sForm
      });
      if (res.code === 200) {
        console.log(res);
        const result = res.data;
        this.shopList = result.list;
        this.page.pageSize = result.pageSize;
        this.page.pageNum = result.pageNum;
        this.page.total = result.total;
        console.log("shopList", this.shopList);
        const $table = this.$refs.xTable1
        $table.loadData(this.shopList);
      } else {
        // this.$message.error(res.message);
      }
    },
    async getShopAllList() {
      const res = await getShopAllList()
      if (res.code === 200) {
        this.shopListTwo = res.data
      }
    },
    // 获取省市区
    handleChange(value) {
      this.selectedOptions = value;
      // console.log(this.selectedOptions);
      var name = "";
      this.selectedOptions.map((item) => {
        name += CodeToText[item] + ",";
      }); // 将省市区三个拼接一起
      this.addtions.names = name;
      console.log(this.addtions.names); // 运用了CodeToText把编码转成了中文
      this.selectedOptionsForm.province = CodeToText[this.selectedOptions[0]];
      this.selectedOptionsForm.county = CodeToText[this.selectedOptions[1]];
      this.selectedOptionsForm.area = CodeToText[this.selectedOptions[2]];
      this.sForm.regionId = value.join(',');
      console.log(this.sForm.regionId, value);
    },
    // 获取条数改变
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.page.pageNum = 1;
      console.log(`每页 ${val} 条`);
      this.getShopList();
    },
    // 获取页数改变
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page.pageNum = val;
      this.getShopList();
    },
    shopDetail(row) {
      console.log('row', row);
      this.title = '店铺详情'
      this.drawer = true
      this.shop = row
    },
    checkShop(row) {
      this.title = '电商门店审核'
      this.drawer = true
      this.shop = row
    },
    async searchFn() {
      this.page = {
        pageNum: 1,
        pageSize: 20,
        total: 0,
      };
      this.sForm.openTime = this.date?.length ? this.date[0] : "";
      this.sForm.endTime = this.date?.length ? this.date[1] : "";
      this.isSearch = true;
      this.getShopList();
    },
    resetFn() {
      this.sForm = {
        id: '',
        auditingStatus: '',
        regionId: '',
        endTime: '',
        openTime: ''
      }
      this.page = {
        pageNum: 1,
        pageSize: 20,
        total: 0,
      };
      this.date = []
      this.isSearch = false;
      this.selectedOptions = [];
      this.getShopList();
    },
    async updateShopStatus(type) {
      if (type === '0') {
        this.remark = ''
      }
      const res = await updateShopStatus({
        id: this.shop.id,
        auditingStatus: type,
        remark: this.remark
      })
      if (res.code === 200) {
        this.$message.success('操作成功')
        this.getShopList()
        this.drawer = false
        this.dialogVisible = false
      }

    }
  },
};
</script>

<style lang="scss" scoped>
.txtBox {
  padding-left: 20px;
  margin-bottom: 30px;

}

.btnBOX {
  text-align: center;
}
</style>
